<script setup lang="ts">
import { useI18n } from "vue-i18n";

defineOptions({
  name: "EducationIndex"
});

const { t } = useI18n();
</script>

<template>
  <div>
    <h1>教育板块</h1>
    <el-card shadow="never" class="mb-2">
      <template #header>
        <div class="card-header">组件方式判断权限</div>
      </template>
      <el-space wrap>
        <Perms value="permission:btn:add">
          <el-button plain type="warning">
            拥有code：'permission:btn:add' 权限可见
          </el-button>
        </Perms>
        <Perms :value="['permission:btn:edit']">
          <el-button plain type="primary">
            拥有code：['permission:btn:edit'] 权限可见
          </el-button>
        </Perms>
        <Perms
          :value="[
            'permission:btn:add',
            'permission:btn:edit',
            'permission:btn:delete'
          ]"
        >
          <el-button plain type="danger">
            拥有code：['permission:btn:add', 'permission:btn:edit',
            'permission:btn:delete'] 权限可见
          </el-button>
        </Perms>
      </el-space>
    </el-card>
  </div>
</template>

<style scoped>
.education-container {
  width: 100%;
  padding: 12px;
}

.box-card {
  width: 100%;
  margin-bottom: 15px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title {
  font-size: 18px;
  font-weight: 600;
}

.content {
  padding: 20px 0;
}
</style>
